<template>
	<view class="inputSelect">
		<input type="text" v-model="value"  @focus="onFocus" />
		<picker :range='options' range-key='name' @change="onChange"></picker>
		<!-- <view class="select" v-show="selectShow">
			<view class="select_item" v-for="item in options" @click="onSelect(item)">
				{{item.name}}
			</view>
		</view> -->
	</view>
</template>

<script>
	export default{
		name:'inputSelect',
		data(){
			return{
				value:'',
				selectShow:false,
				options:[
					{name:'a1'},
					{name:'a2'},
				]
			}
		},
		methods:{
			onBlur(){
				this.selectShow = false
			},
			onFocus(){
				this.selectShow = true
				this.options = [
					{name:'a3'},
					{name:'a4'},
				]
			},
			onChange(e){
				//console.log(e)
				this.value = this.options[e.detail.value].name
			},
			onSelect(item){
				this.value = item.name
				this.selectShow = false
			}
		}
	}
</script>

<style lang="scss">
	.inputSelect{
		position: relative;
		.select{
			position: absolute;
			z-index: 99999;
		}
	}
</style>
